<template>
  <div class="home">
    <div class="top">
          <div class="divLeft">
      <div class="banner">
      <img
        src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png"
        alt=""
        class="img-left"
      />
      <img
        src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png"
        alt=""
        class="img-right"
      />
      <img
        src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
        alt=""
        class="user"
      />
      <p class="user-title">仓储管理员</p>
      <p class="subject-title">我不是为了输赢，我就是认真！</p>
      <p class="subject-author">---罗永浩</p>
      <div class="site">
        <div class="title">北京总仓</div>
      </div>
    </div>

    <div class="backlog">
      <div class="subject">待办信息</div>
      <div class="item-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item,index) in info" :key="index">
            <div class="grid-content bg-purple">
              <div class="top">
                  <div :class="item.icon">
                    <i :class="item.pic"></i>
                  </div>
                  <p>{{item.name}}</p>
              </div>
              <div class="bottom">
                <div class="left">
                  <p>新增<span>{{item.value1}}</span></p>
                </div>
                <div class="right">
                  <p>待审核<span :class="item.num">{{item.value2}}</span></p>
                </div>
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="grid-content bg-purple">
               <div class="top">
                  <div class="icon icon1">
                    <i class="el-icon-tickets"></i>
                  </div>
                  <p>入库单</p>
              </div>
              <div class="bottom">
                <div class="left">
                  <p>新增<span>5</span></p>
                </div>
                <div class="right">
                  <p>待审核<span  class="two">5</span></p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
               <div class="top">
                  <div class="icon icon2">
                    <i class="el-icon-tickets"></i>
                  </div>
                  <p>入库单</p>
              </div>
              <div class="bottom">
                <div class="left">
                  <p>新增<span>5</span></p>
                </div>
                <div class="right">
                  <p>待审核<span class="three">5</span></p>
                </div>
              </div>
            </div>
          </el-col> -->
        </el-row>
      </div>
    </div>
    </div>

    <div class="divRight">
      <div class="notes">
        <div class="subject">通知/公告</div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">运维服务更新通知</div>
            <div class="time">2022.10.19 09:05:00</div>
          </div>

          <div class="item">
            <div class="hr"></div>
            <div class="title">运维服务更新通知</div>
            <div class="time">2022.10.19 09:05:00</div>
          </div>

          <div class="item">
            <div class="hr"></div>
            <div class="title">运维服务更新通知</div>
            <div class="time">2022.10.19 09:05:00</div>
          </div>

          <div class="item">
            <div class="hr"></div>
            <div class="title">运维服务更新通知</div>
            <div class="time">2022.10.19 09:05:00</div>
          </div>

          <div class="item">
            <div class="hr"></div>
            <div class="title">运维服务更新通知</div>
            <div class="time">2022.10.19 09:05:00</div>
          </div>
      </div>
    </div>
    </div>

    <div class="tasks">
      <div class="subject">任务导航</div>
      <div class="item-list">
        <el-row :gutter="20">
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <div class="icon">
              <i class="el-icon-truck"></i>
            </div>
            <div class="title">收货任务</div>
          </div>
        </el-col>

       <el-col :span="5">
          <div class="grid-content bg-purple">
            <div class="icon icon1">
              <i class="el-icon-sell"></i>
            </div>
            <div class="title">上架任务</div>
          </div>
        </el-col>

        <el-col :span="5">
          <div class="grid-content bg-purple">
            <div class="icon icon2">
              <i class="el-icon-notebook-1"></i>
            </div>
            <div class="title">盘点任务</div>
          </div>
        </el-col>

        <el-col :span="5">
          <div class="grid-content bg-purple">
            <div class="icon icon3">
              <i class="el-icon-shopping-cart-full"></i>
            </div>
            <div class="title">拣货任务</div>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="grid-content bg-purple">
            <div class="icon icon4">
              <i class="el-icon-user"></i>
            </div>
            <div class="title">交接任务</div>
          </div>
        </el-col>
        </el-row>
      </div>
    </div>

    <div class="inout-charts">
      <div class="header">
        <div class="left">入库/出库信息</div>
        <div class="right">
          <div @click="clickFn1" :class="{active:isShow===1}">本周</div>
          <div @click="clickFn2" :class="{active:isShow===2}">本月</div>
          <div @click="clickFn3" :class="{active:isShow===3}">全年</div>
        </div>
      </div>

      <div class="chart" style="width:100%; height:430px" id="kunkun">
      </div>
    </div>

    <div class="libs">
      <div class="use-charts">
        <div class="header">
          <p class="subject">库存使用情况</p>
        </div>
        <div class="chart" style="width:364px;height:280px" ref="kunkun1">

        </div>
      </div>
      <div class="libs-charts">
        <div class="header">
          <div class="subject">库区使用情况</div>
        </div>
        <div class="chart" ref="kunkun2" style="width:915px;height:280px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getInfo, getEcharts, getStockUseState } from '@/api/home/home'
export default {
  name: 'home-page',
  data () {
    return {
      isShow: 1,
      id: 'w',
      info: [],
      week: {},
      stockState: []

    }
  },
  methods: {
    clickFn1 () {
      this.isShow = 1
      this.id = 'w'
      this.getEcharts()
    },
    clickFn2 () {
      this.isShow = 2
      this.id = 'e'
      this.getEcharts()
    },
    clickFn3 () {
      this.isShow = 3
      this.id = 'c'
      this.getEcharts()
    },
    // 获取货单
    async getInfo () {
      const { data } = await getInfo()
      data.forEach(item => {
        if (item.name === '入库单') {
          item.icon = 'icon'
          item.num = ''
          item.pic = 'el-icon-tickets'
        } else if (item.name === '出库单') {
          item.icon = 'icon1'
          item.num = 'two'
          item.pic = 'el-icon-document-checked'
        } else if (item.name === '盘点单') {
          item.icon = 'icon2'
          item.num = 'three'
          item.pic = 'el-icon-document-add'
        }
      })
      this.info = data
    },
    // 获取出入货echarts数据
    async getEcharts () {
      const { data } = await getEcharts(this.id)
      this.week = data
    },
    // 获取库存使用情况
    async getStockUseState () {
      const { data } = await getStockUseState()
      this.stockState = data
    },
    // 第一个Echarts
    Echarts1 () {
      const myChart = echarts.init(document.getElementById('kunkun'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['入库', '出库'],
          bottom: 0
        },
        xAxis: [
          {
            type: 'category',
            data: this.week.x,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 1000,
            interval: 200

          }
        ],
        series: [
          {
            name: this.week.data[0].name,
            type: 'bar',
            data: this.week.data[0].data,
            color: 'pink'
          },
          {
            name: this.week.data[1].name,
            type: 'bar',
            data: this.week.data[1].data,
            color: 'hotpink'
          }
        ]
      })
    },

    // 第二个Echarts
    Echarts2 () {
      const myChart1 = echarts.init(this.$refs.kunkun1)
      myChart1.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20
              }
            },
            labelLine: {
              show: false
            },
            data: this.stockState
          }
        ]
      })
    }
  },

  created () {
    this.getInfo()
    this.getEcharts()
    this.getStockUseState()
  },
  mounted () {
    const myChart2 = echarts.init(this.$refs.kunkun2)
    myChart2.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: '20%',
        top: '25%'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '70%',
          left: '-30%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  },
  watch: {
    week: {
      deep: true,
      handler () {
        this.Echarts1()
      }
    },
    stockState: {
      deep: true,
      handler () {
        this.Echarts2()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
 .top {
   display: flex;
  .divLeft {
    width: calc(100% - 261px);
    padding-right: 30px;
      .banner {
    position: relative;
    width: 100%;
    height: 148px;
    background: linear-gradient(270deg, #ffc771, #ffa634);
    box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);
    border-radius: 12px;
    .img-left {
      position: absolute;
      top: 0;
      left: 0;
      height: 148px;
    }
    .img-right {
      position: absolute;
      top: 0;
      right: 0;
      height: 148px;
    }
    .user {
      position: absolute;
      top: 31px;
      left: 43px;
      height: 62px;
    }
    .user-title {
      position: absolute;
      left: 36px;
      bottom: 20px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #332929;
      line-height: 22px;
    }
    .subject-title {
      position: absolute;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 25px;
      top: 36px;
      left: 200px;
      font-size: 18px;
    }
    .subject-author {
      position: absolute;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 25px;
      top: 76px;
      left: 400px;
      font-size: 16px;
    }
    .site {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 147px;
      height: 40px;
      background: #f8f5f5;
      border-radius: 6px;
      opacity: 0.79;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      .title {
        font-size: 14px;
        font-weight: 500;
        color: #332929;
      }
    }
  }
  .backlog {
    margin-top: 20px;
    width: 100%;
    height: 282px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    .subject {
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .item-list {
      margin-top: 19px;
      .grid-content {
        padding: 15px;
        background-color: #fbf7f7;
        .top{
            display: flex;
            align-items: center;
          .icon {
              width: 49px;
              height: 49px;
              background: #0076ff;
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              .el-icon-tickets {
                font-size: 24px;
                color: #fff;
              }
          }
          p {
            margin-left: 15px;
            font-size: 16px;
            font-weight: 500;
            color: #332929;
          }
        }
        .bottom {
          margin-top: 60px;
          display: flex;
          align-items: center;
          .left {
            p {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-family: PingFangSC-Regular,PingFang SC;
                font-weight: 400;
                color: #887e7e;
                margin-right: 10px;
                vertical-align: super;
            span {
              margin-left: 10px;
              font-size: 36px;
              font-family: DIN-Medium,DIN;
              font-weight: 500;
              color: #332929;
              margin-right: 20px;
            }
          }
          }
          .right {
            p {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-family: PingFangSC-Regular,PingFang SC;
              font-weight: 400;
              color: #887e7e;
              margin-right: 10px;
              vertical-align: super;
            span {
              margin-left: 10px;
              font-size: 36px;
              font-family: DIN-Medium,DIN;
              font-weight: 500;
              color: rgb(0, 118, 255);
              margin-right: 20px;
            }
          }
          }
        }
        .icon1 {
          width: 49px;
          height: 49px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: rgb(255, 178, 0)!important;
          i {
            font-size: 24px;
            color: #fff;
          }
        }
        .icon2 {
          width: 49px;
          height: 49px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: rgb(255, 113, 0)!important;
          i {
            font-size: 24px;
            color: #fff;
          }
        }
        .two {
          color: rgb(255, 178, 0)!important;
        }
        .three {
          color: rgb(255, 113, 0)!important;
        }
      }
    }
  }
  }
  .divRight {
    .notes {
      width: 261px;
      height: 451px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 30px;
      .subject {
        font-size: 16px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: #332929;
        line-height: 22px;
      }
      .item {
        margin-top: 15px;
        .hr {
          width: 201px;
          height: 1px;
          background-color: #f5efee;
        }
        .title {
          width: 195px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color: #332929;
          line-height: 18px;
          margin-top: 15px;
        }
        .time {
          width: 115px;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color: #887e7e;
          line-height: 17px;
          margin-top: 9px;
        }
      }
    }
  }
 }
  .tasks {
    margin-top: 20px;
    width: 100%;
    height: 188px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    .subject {
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .item-list {
      margin-top: 19px;
      .grid-content {
        width: 100%;
        height: 93px;
        background: #fbf7f7;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .icon {
          width: 50px;
          height: 50px;
          background: #0076ff;
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          i{
            font-size: 28px;
            color: #f8f5f5;
          }
        }
        .title {
            font-size: 16px;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: #332929;
            line-height: 22px;
        }
        .icon1 {
              background: rgb(82, 212, 243)!important;
        }
        .icon2 {
          background: rgb(255, 113, 0)!important;
        }
        .icon3 {
          background: rgb(255, 96, 158)!important;
        }
        .icon4 {
          background: rgb(255, 178, 0)!important;
        }
      }
    }
  }
  .inout-charts {
    margin-top: 20px;
    height: 500px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    .header {
      display: flex;
      justify-content: space-between;
      .left {
        font-size: 16px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: #332929;
        line-height: 22px;
      }
      .right {
        display: flex;
        div {
          width: 70px;
          height: 36px;
          border-color: #ffb200;
          text-align: center;
          line-height: 36px;
          border: 1px solid #ccc;
          border-right: 1px solid #ccc;
          cursor: pointer;
        }
        .active {
          color: #fff;
          background-color: #ffb200;
        }
      }
    }
  }
  .libs {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .use-charts {
      width: 30%;
      height: 354px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 25px;
      margin-right: 30px;
      .header{
        .subject{
          font-size: 16px;
          font-family: PingFangSC-Semibold,PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
      }
    }
    .libs-charts {
      width: 70%;
      height: 354px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 25px;
      .header {
        .subject {
          font-size: 16px;
          font-family: PingFangSC-Semibold,PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
      }
    }
  }
}
</style>
